<template>
  <div class="home">
    <div class="homePage">
      <div class="menu" :class="{menushow:!isShowMenu}">
        <span class="closebtn" @click="showMenu()"><i class="iconfont icon-menu"></i></span>
        <div class="userImg"><img src="../assets/img/user.jpg" /></div>
        <ul class="userMsg">
          <li><span>888</span>文章</li>
          <li><span>888</span>评论</li>
          <li><span>888</span>浏览</li>
          <li><span>888</span>当前访客</li>
        </ul>
        <p class="title">(❤ ω ❤)</p>
        <ul class="menuList">
          <li><a><i class="iconfont icon-game"></i><span>首页</span><i class="iconfont icon-game"></i></a></li>
          <li><a>
              <router-link to="/home/learn"><i class="iconfont icon-game"></i><span>学无止境</span><i class="iconfont icon-game"></i></router-link>
            </a></li>
          <li><a>
              <router-link to="/home/life"><i class="iconfont icon-game"></i><span>生活日记</span><i class="iconfont icon-game"></i></router-link>
            </a></li>
          <li><a>
              <router-link to="/photo"><i class="iconfont icon-game"></i><span>照片墙</span><i class="iconfont icon-game"></i></router-link>
            </a></li>
          <li><a><i class="iconfont icon-game"></i><span>留言</span><i class="iconfont icon-game"></i></a></li>
        </ul>
      </div>
      <div class="panel">
        <h1>ZZ の BLOG</h1>
        <h3>一个前端程序媛</h3>
        <h4>{{nowTime}}</h4>
      </div>
      <div class="goDown"><i class="iconfont icon-xia"></i></div>
    </div>

      <router-view></router-view>

    <div class="footer">
      <div class="footerIcon"><i class="iconfont icon-game"></i><i class="iconfont icon-game"></i><i class="iconfont icon-game"></i></div>
      <p>© 2019 ZZ 的 个人博客</p>
    </div>
  </div>
</template>

<script>
  export default {
    name: "home",
    data() {
      return {
        isShowMenu: true,
        nowTime: ""
      }
    },
    mounted() {
      this.showTime();
    },
    methods: {
      showMenu() {
        this.isShowMenu = !this.isShowMenu;
      },
      showTime() {
        var now = new Date();
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();
        var timeValue = (hours >= 12) ? " 下午 " : " 上午 ";
        timeValue += ((hours > 12) ? hours - 12 : hours) + "点";
        timeValue += ((minutes < 10) ? "0" : "") + minutes + "分";
        timeValue += ((seconds < 10) ? "0" : "") + seconds + "秒";
        this.nowTime = timeValue;
        setTimeout(this.showTime, 100);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .home {
    width: 100%;
    height: 100%;
    overflow: auto;
    background: #f1f1f1;
  }

  .homePage {
    width: 100%;
    height: 90%;
    background: url("../assets/img/homebg1.jpg") no-repeat center center;
    background-size: cover;
    position: relative;
  }

  .menu {
    width: 320px;
    height: 100%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 15px;
    position: fixed;
    top: 0;
    left: -320px;
    transition: left 1s;
    z-index:9999;
    .closebtn {
      position: absolute;
      right: -31px;
      top: 0;
      width: 20px;
      background: rgba(255, 255, 255, 0.8);
      color: #222222;
      padding: 10px 5px;
      text-align: center;
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px;
      border-top: 1px solid #222222;
      border-bottom: 1px solid #222222;
      border-right: 1px solid #222222;
    }

    .closebtn:hover {
      background: rgba(255, 255, 255, 1);

    }

    .userImg {
      width: 80px;
      height: 80px;
      margin: 40px auto 0;
      border-radius: 50%;
      overflow: hidden;
      border: 4px solid rgba(255, 255, 255, 0.8);
      box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.3), 0 2px 3px rgba(0, 0, 0, 0.4);
      transition: transform 1s, border 1s;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .userImg:hover {
      transform: rotate(360deg);
      border: 4px solid rgba(255, 255, 255, 1);
    }

    .userMsg {
      padding: 20px 0;

      li {
        list-style: none;
        text-align: center;
        font-size: 14px;

        span {
          color: #df5000;
          display: inline-block;
          margin: 0 10px;
        }
      }
    }

    .menuList {
      padding-top: 40px;

      li {
        list-style: none;
        text-align: center;
        margin-bottom: 15px;

        span {
          display: inline-block;
          margin: 0 10px;
          font-size: 18px;
          color: #e6e6e6;
        }

        a {
          position: relative;
          text-decoration: none;
          outline: none;
          color: #ffffff;
        }

        a:before {
          position: absolute;
          left: 0;
          top: -10px;
          opacity: 0;
          width: 0%;
          height: 2px;
          content: '';
          background: #ffffff;
          transition: all 0.3s;
        }

        a:after {
          position: absolute;
          right: 0;
          bottom: -10px;
          opacity: 0;
          width: 0%;
          height: 2px;
          content: '';
          background: #ffffff;
          transition: all 0.3s;
        }
      }

      li:hover {
        span {
          color: #ffffff;
        }

        a:after,
        a:before {
          opacity: 1;
          width: 100%;
        }
      }

    }
  }

  .menushow {
    left: 0;
  }

  .panel {
    text-align: center;
    background: rgba(255, 255, 255, 0.5);
    width: 400px;
    position: absolute;
    top: 30%;
    left: calc(50% - 200px);
    padding: 50px 0;

    h1 {
      font-size: 56px;
    }

    h3 {
      font-size: 32px;
    }

    h4 {
      margin-top: 20px;
    }
  }

  .goDown {
    position: absolute;
    bottom: 10px;
    left: calc(50% - 20px);
    text-align: center;
    width: 40px;
    color: #ffffff;
    animation: jump 1s infinite alternate;

    i {
      font-size: 32px;
    }
  }

  @keyframes jump {
    from {
      bottom: 10px;
    }

    to {
      bottom: 30px;
    }
  }

  .title {
    position: relative;
    text-align: center;
    font-size: 12px;
  }

  .title:before,
  .title:after {
    content: "";
    width: 38%;
    height: 1px;
    position: absolute;
    top: 50%;
  }

  .title:before {
    background: -webkit-linear-gradient(right, #f56f1f, #eee);
    background: -o-linear-gradient(left, #f56f1f, #eee);
    background: -moz-linear-gradient(left, #f56f1f, #eee);
    background: linear-gradient(to left, #f56f1f, #eee);
    left: 2px;
  }

  .title:after {
    background: -webkit-linear-gradient(left, #f56f1f, #eee);
    background: -o-linear-gradient(right, #f56f1f, #eee);
    background: -moz-linear-gradient(right, #f56f1f, #eee);
    background: linear-gradient(to right, #f56f1f, #eee);
    right: 2px;
  }

  .footer {
    background: #232323;
    padding: 20px 0;
    color: #ffffff;

    .footerIcon {
      text-align: center;
      i {
        margin: 0 15px;
      }
    }
    p {
      text-align: center;
      font-size: 14px;
      margin-top: 10px;
    }
  }
</style>
